<template>
    <div class="bj-menu" v-show="isShow">
        <div class="item" v-for="item in filterData" :key="item['id']" v-text="item['name']" @click="handlerClick(item['id'])"></div>
    </div>
</template>
<script>
/**
 * Description: 自定义右键菜单组件
 * Author: iissoftware
 * Date: 2019-01-16
 * Description: fn(n)点击选中项时触发
 * n = 1：刷新
 * n = 2：新增
 * n = 3：修改
 * n = 4：删除
 * n = 5：禁用
 * n = 6：启用
 * n = 7：打印
 * n = 8：上移
 * n = 9：下移
 * n = 10：置于顶层
 * n = 11：至于底层
*/
import RightMenu from '../../menu/rightMenu'
export default {
    props: {
        isShow: {       //是否显示右键菜单
            type: Boolean,
            default: false
        },
        disabled: {     //禁用显示的项
            type: Array
        }
    },
    data() {
        return {
            menus: RightMenu
        }
    },
    computed: {
        filterData() {          //过滤禁用的数据
            if(this.disabled.length > 0) {
                let newArr = [];
                this.disabled.forEach(disItem => {
                    this.menus.forEach(item => {
                        if(disItem === item['name']) return;
                        newArr.push(item);
                    });
                });
                return newArr;
            } else {
                return this.menus;
            }
        }
    },
    methods: {
        handlerClick(index) {       //点击每个功能菜单触发
            this.$emit('handlerClick', index);
        },
        handlerClickClose() {       //点击文档关闭菜单
            $(document).on('click', () => this.$emit('update:isShow', false));
        }
    },
    created() {
        this.handlerClickClose();
    }
}
</script>

<style scoped>
    .bj-menu {
        background-color: #fff;
        box-shadow: 0 0 10px 1px #e9e9e9;
        position: fixed;
        z-index: 9999;
        padding: 5px 0;
    }
    .bj-menu .item {
        font-size: 12px;
        text-align: center;
        padding: 5px 12px;
        cursor: pointer;
    }
    .bj-menu .item:hover {
        background-color: #f4f4f4;
    }
</style>

